/* hash路由插件
 * 本路由加载器依赖于mui组件中的ajax插件，请在mui组件之后调用
 * 本路由加载器使用路径中的hash值作为切换依据
 * 本路由加载器已实现动态加载JS文件和css文件并执行
 */
(function($, window, document) {
	/* 动态加载css和js */
	var dynamicLoading = {
		css: function(path) {
			if (!path || path.length === 0) {
				throw new Error('argument "path" is required !');
			}
			var head = document.getElementsByTagName('head')[0];
			var link = document.createElement('link');
			link.href = path;
			link.rel = 'stylesheet';
			link.type = 'text/css';
			link.id = path.split("/")[1]+"_css";
			link.className = "dynamic";
			head.appendChild(link);
		},
		js: function(path) {
			if (!path || path.length === 0) {
				throw new Error('argument "path" is required !');
			}
			var head = document.getElementsByTagName('head')[0];
			var script = document.createElement('script');
			script.src = path;
			script.type = 'text/javascript';
			script.id = path.split("/")[1]+"_js";
			script.className = "dynamic";
			head.appendChild(script);
		}
	}

	/* 切换路由
	 * _id为路由的容器元素的id
	 * routesPath为存放各路由html文本的文件夹相对路径
	 */
	window.hashRouter = function(_id, routesPath) {
		//初始化
		window.onload = init
		
		//监听hash变化
		window.addEventListener("hashchange",init);
		
		function init(){
			var hash = window.location.hash.slice(1), //当前路由hash,去除“#”号
				$ele = document.getElementById(_id), //要加载模块的dom元素
				routeUrl = routesPath + "/" + hash + "/tpl.html"; //路由模块url
			
			if(hash=="") window.location.hash = "home";
			
			//请求模块文件
			//如若请求失败(不存在路径，则默认返回mui提供的404代码),所以这里不错错误判断
			$.get(routeUrl, function(htmlStr) {
				//如果为404,更改默认样式
				if (htmlStr.indexOf("Page Not Found") > 0) {
					htmlStr = htmlStr.replace("height: 40px;", "height: 40px;margin-top: 100px;")
					htmlStr = htmlStr.replace("font-size: 40px;", "font-size: 40px;margin: 100px 0 calc(100vh - 310px);")
					$ele.innerHTML = htmlStr //直接给相应的元素赋html
					return;
				}
				
				//移除所有之前的js和css(排除当前要加载的文件)
				var dynamicAssets = [].slice.call(document.querySelectorAll(".dynamic"))
				for (var i = 0; i < dynamicAssets.length; i++) {
					var item = dynamicAssets[i]
					if(item!=document.getElementById(hash+"_css")){
						item.remove()
					}
				}
				
				//加载css
				if($("#"+hash+"_css").length==0){ //如果已有该样式表则不加载
					dynamicLoading.css(routesPath + "/" + hash + "/style.css");
				}
			
				//加载html
				$ele.innerHTML = htmlStr //直接给相应的元素赋html
			
				//加载js
				if($("#"+hash+"_js").length==0){
					dynamicLoading.js(routesPath + "/" + hash + "/index.js");
				}
			});
			
		}
	}
})(mui, window, document)
